﻿@{
    Layout = "~/Views/Shared/_Index.cshtml";
}
<div class="container-div">
    <div class="row">
        <div id="searchDiv" class="col-sm-12 search-collapse">
            <div class="select-list">
                <ul>
                    <li>
                        用户名称：<input id="userName" col="UserName" type="text" />
                    </li>
                    <li>
                        手机号码：<input id="phone" col="Phone" type="text" />
                    </li>
                    <li>
                        课程名称：<input id="courseName" col="CourseName" type="text" />
                    </li>
                    <li>
                        状态：<select id="status" col="Status">
                            <option value="">所有</option>
                            <option value="0">待支付</option>
                            <option value="1">已支付</option>
                            <option value="2">已取消</option>
                            <option value="3">已完成</option>
                        </select>
                    </li>
                    <li>
                        <a id="btnSearch" class="btn btn-primary btn-sm" onclick="searchGrid()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                    </li>
                </ul>
            </div>
        </div>
        
        <div class="col-sm-12 select-table table-striped">
            <table id="gridTable" data-mobile-responsive="true"></table>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function () {
        initGrid();
    });

    function initGrid() {
        var queryUrl = '@Url.Content("~/QixingManage/CourseRegistration/GetPageListJson")';
        $('#gridTable').ysTable({
            url: queryUrl,
            columns: [
                { checkbox: true, visible: true },
                { field: 'Id', title: 'Id', visible: false }, 
                { field: 'CourseName', title: '课程名称' },
                { field: 'name', title: '报名人姓名' },
                { field: 'phone', title: '联系电话' },
                { field: 'fee', title: '报名费用' },
                { 
                    field: 'status', 
                    title: '状态',
                    formatter: function (value, row, index) {
                        if (value == 0) return '<span class="badge badge-warning">待支付</span>';
                        else if (value == 1) return '<span class="badge badge-primary">已支付</span>';
                        else if (value == 2) return '<span class="badge badge-danger">已取消</span>';
                        else if (value == 3) return '<span class="badge badge-success">已完成</span>';
                    }
                },
                {
                    field: 'payment_time',
                    title: '支付时间',
                    formatter: function (value, row, index) {
                        return ys.formatDate(value, "yyyy-MM-dd HH:mm:ss");
                    }
                },
                {
                    field: 'create_time',
                    title: '报名时间',
                    formatter: function (value, row, index) {
                        return ys.formatDate(value, "yyyy-MM-dd HH:mm:ss");
                    }
                }
            ],
            queryParams: function (params) {
                var pagination = $('#gridTable').ysTable('getPagination', params);
                var queryString = $('#searchDiv').getWebControls(pagination);
                return queryString;
            }
        });
    }

    function searchGrid() {
        $('#gridTable').ysTable('search');
        resetToolbarStatus();
    }
</script>
